import React from 'react';
import './index.less'

import {Card, Form, Input, Button,Checkbox,Icon} from 'antd';
const FormItem = Form.Item;
 class FromLogin extends React.Component{



    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Card title="登录行内表单"  className="card-wrap">
                    <Form layout="inline">
                        <FormItem>
                            <Input placeholder="请输入用户名" />
                        </FormItem>
                        <FormItem>
                            <Input placeholder="请输入密码" />
                        </FormItem>
                        <FormItem>
                            <Button type="primary" >登录</Button>
                        </FormItem>
                    </Form>
                </Card> 

                 <Card title="登录水平表单"  className="card-wrap">
                    <Form  style={{width:300}}>
                    <FormItem>
                        {
                            getFieldDecorator("userName",{
                                initialValue:'tom',
                                rules:[]
                            })(
                                <Input placeholder="请输入用户名" />
                            )
                        }
                           
                        </FormItem>
                        <FormItem>
                        {
                            getFieldDecorator("passWord",{
                                initialValue:'1234',
                                rules:[]
                            })(
                                <Input placeholder="请输入密码" />
                            )
                        }
                           
                            
                        </FormItem>
                        <FormItem>
                        {
                            getFieldDecorator("remember",{
                                initialValue: true
                                
                            })(
                               <Checkbox>请输入密码</Checkbox>
                            )
                        }
                           
                            <a href="#" >我那个级密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" >登录</Button>
                        </FormItem>
                    </Form>
                </Card> 
                  
                <Card title="验证">
                  <Form onSubmit={this.handleSubmit} className="login-form" style={{width:280}}>
                      <Form.Item>
                        {getFieldDecorator('username', {
                          rules: [{ required: true, message: '用户名不能为空!' }],
                        })(
                          <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="Username"
                          />,
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('password', {
                          rules: [{ required: true, message: '密码不能为空!' }],
                        })(
                          <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="Password"
                          />,
                        )}
                      </Form.Item>
                      <Form.Item>
                        {getFieldDecorator('remember', {
                          valuePropName: 'checked',
                          initialValue: true,
                        })(<Checkbox>Remember me</Checkbox>)}
                        <a className="login-form-forgot" href="">
                          Forgot password
                        </a>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                          Log in
                        </Button>
                        Or <a href="">register now!</a>
                      </Form.Item>
                    </Form>
                </Card>
            </div>
        )
    }
}
export default Form.create()(FromLogin);
